<template>
  <right-canvas-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-pixis">
      <dropdown-normal label="脚本类名" :valLists="INJECT_PIXI_CLASS_NAMES" v-model="commonAttr.injectJsClass" @change="onChangeAttr"></dropdown-normal>
      <input-normal label="脚本类名" v-model="commonAttr.injectJsClass" placeholder="ClickGetCard" @change="onChangeAttr"></input-normal>
      <textarea-normal v-if="commonAttr.injectJsClass" label="脚本类参数" v-model="commonAttr.injectJsClassParams" placeholder='{key:value}' @change="onChangeAttr"></textarea-normal>
    </el-form>
  </right-canvas-template>
</template>

<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'
import { INJECT_PIXI_CLASS_NAMES } from '@/const/'

const useWebComponent = useWebComponentStore()

let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
const onChangeAttr = () => {
  // useWebComponent.updateCurrentComponentData({ commonAttr: commonAttr_ })
}
</script>